<template>
  <el-dialog
    class="myDialog"
    @close="resetForm"
    :visible.sync="visible"
    width="470px"
    draggable
    center
  >
    <p
      slot="title"
      class="title"
    >{{`${dialogTitle} 计划`}}</p>
    <!--  -->
    <el-row
      :gutter="10"
      style="marginTop: 20px;padding:0 30px;"
    >
      <el-form
        ref="dialogForm"
        :model="dialogForm"
        label-width="74px"
      >
        <!-- 所属网点 -->
        <el-form-item
          label="所属网点："
          class="n-form-item"
          prop="centerId"
          :rules="[{ required: true, message: '所属网点不能为空,请输入', trigger: 'blur'}]"
        >
          <el-select
            v-model="dialogForm.centerName"
            :disabled="dialogTitle !== '新增' "
            placeholder="请选择网点"
            style="width:100%"
            @change="changeScanSite"
            remote
            filterable
          >
            <el-option
              v-for="(item, index) in siteList"
              :key="index"
              :label="item.label"
              :value="item"
            ></el-option>
          </el-select>
        </el-form-item>
        <!-- 计划名称 -->
        <el-form-item
          label="计划名称："
          class="n-form-item"
          prop="keepName"
          :rules="[{ required: true, message: '计划名称不能为空,请输入'}]"
        >
          <el-input
            v-model="dialogForm.keepName"
            placeholder="请输入计划名称"
          ></el-input>
        </el-form-item>

        <!-- 开始日期 -->
        <el-form-item
          label="开始日期："
          class="n-form-item"
          prop="keepStartDate"
          :rules="[{ required: true, message: '开始日期不能为空,请输入'}]"
        >
          <el-date-picker
            v-model="dialogForm.keepStartDate"
            value-format="yyyy-MM-dd"
            format="yyyy-MM-dd"
            placeholder="请选择开始日期"
            style="width:100%"
          ></el-date-picker>
        </el-form-item>
        <!-- 结束日期 -->
        <el-form-item
          label="结束日期："
          class="n-form-item"
          prop="keepEndDate"
          :rules="[{ required: true, message: '结束日期不能为空,请输入', trigger: 'change'}]"
        >
          <el-date-picker
            v-model="dialogForm.keepEndDate"
            value-format="yyyy-MM-dd"
            format="yyyy-MM-dd"
            placeholder="请选择结束日期"
            style="width:100%"
          ></el-date-picker>
        </el-form-item>
      </el-form>
    </el-row>
    <!--  -->
    <div
      slot="footer"
      class="dialog-footer"
    >
      <el-button @click="visible = false">取消</el-button>
      <el-button
        type="primary"
        @click="handleConfirm"
      >提交</el-button>
    </div>
  </el-dialog>
</template>
<script>
import busEvent from './js/busEvent';
import { mapGetters } from 'vuex';
import { Message } from 'element-ui';
import { ADD_KEEP_PLAN, EDIT_KEEP_PLAN } from '@/api/test';
import miment from 'miment';
export default {
  name: 'dialogSpace',
  data() {
    return {
      // ============================================== 属性
      visible: false, // 弹窗是否显示
      dialogTitle: '',
      siteList: [], // 获取中心列表
      // ============================================== 对象
      dialogForm: {
        id: '', // 数据 id
        centerId: '', // 中心id
        centerName: '', // 中心name
        keepName: '', // 计划名称
        keepStartDate: '', // 开始日期
        keepEndDate: '' // 结束日期
      }
    };
  },
  created() {
    busEvent.$on('showHandleDialog', res => {
      this.dialogTitle = res.title;
      this.visible = true;
      // this.siteList = this.queryScanSite;
      this.getCenterList();
      if (res.row) {
        const form = Object.assign({}, res.row);
        form['keepStartDate'] = miment(form.keepStartDate).format('YYYY-MM-DD');
        form['keepEndDate'] = miment(form.keepEndDate).format('YYYY-MM-DD');
        this.dialogForm = form;
      }
    });
  },
  computed: {
    ...mapGetters({
      userInfo: 'getUserInfo'
    })
  },
  methods: {
    // 重置表单
    resetForm() {
      Object.assign(this.$data, this.$options.data());
      // eslint-disable-next-line no-unused-expressions
      this.$refs.dialogForm ? this.$refs.dialogForm.resetFields() : '';
    },
    getCenterList() {
      const dataPermissions = this.userInfo.dataPermissions;
      this.siteList = dataPermissions.map(val => {
        return {
          label: val.centerName,
          value: val.centerId
        };
      });
    },
    // 申请网点的变更
    changeScanSite(item) {
      if (!item) {
        return false;
      } else {
        this.dialogForm.centerId = item.value; // 网点id
        this.dialogForm.centerName = item.label; // 网点名称
      }
    },
    // 提交
    handleConfirm() {
      this.$refs.dialogForm.validate(valid => {
        if (valid) {
          const dateInterval = new Date(this.dialogForm.keepEndDate).getTime() - new Date(this.dialogForm.keepStartDate).getTime();
          if (dateInterval < 0) {
            Message({
              type: 'warning',
              message: '开始日期不能大于结束日期'
            });
            return false;
          }
          const API_FUNC = this.dialogTitle === '新增' ? ADD_KEEP_PLAN : EDIT_KEEP_PLAN;
          const add_params = {
            ...this.dialogForm,
            createBy: this.userInfo.userName,
            createUserCode: this.userInfo.userCode
          };
          const edit_params = {
            id: this.dialogForm.id,
            keepName: this.dialogForm.keepName,
            keepStartDate: this.dialogForm.keepStartDate,
            keepEndDate: this.dialogForm.keepEndDate,
            modifiedBy: this.userInfo.userName,
            modifiedUserCode: this.userInfo.userCode
          };
          API_FUNC(this.dialogTitle === '新增' ? add_params : edit_params).then(res => {
            if (res.status) {
              Message({
                type: 'success',
                message: res.message
              });
              this.visible = false;
              busEvent.$emit('updateTable');
            } else {
              Message({
                type: 'error',
                message: res.message
              });
            }
          });
        }
      });
    }
  }
};
</script>

